<template>
  <div class="editor-box">
    <div ref="editor" class="editor" />
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  props: {
    value: {
      type: Object,
      default: () => ({
        picUrl: '',
        word: ''
      })
    }
  },
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    this.initEditor()
  },
  methods: {
    initEditor() {
      this.editor = new E(this.$refs.editor)
      // 自定义菜单配置
      this.editor.config.menus = [
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        'todo',
        'justify',
        'quote',
        // 'emoticon',
        // 'image',
        // 'video',
        // 'table',
        'code',
        'splitLine',
        'undo',
        'redo'
      ]
      console.log(this.editor.config.colors)
      this.editor.config.colors = [
        ...this.editor.config.colors
      ]
      this.editor.config.onchange = (html) => {
        this.value.word = html
      }
      this.editor.create()
      // 初始化数据
      this.editor.txt.html(this.value.word)
    }
  }
}
</script>

<style lang="scss" scoped>
.editor-box{
  width: 100%;
}
</style>
